<template>
    <el-header height="64px" id="nav">
        <div class="container-xl p-0">
            <div class="navbar navbar-expand-lg">
                <div class="navbar-brand" style="font-size: 0px" href="/">
                    <img :src="icon" height="40" />
                </div>

                <el-button type="primary" size="default" class="navbar-toggler" link :style="{ marginRight: '20px', }"
                    @click="collapse.display === 'block'
                        ? (collapse.display = 'none')
                        : (collapse.display = 'block')
                        ">
                    <el-icon size="default">
                        <Menu v-if="!collapse.display" />
                        <CloseBold v-else />
                    </el-icon>
                </el-button>

                <div class="collapse navbar-collapse" :style="collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav" :style="{ margin: '0 auto' }">
                        <!-- <router-link :to="{ path: '/home' }" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <el-icon>
                                    <HomeFilled />
                                </el-icon>
                                <span class="nav-item-title">&nbsp;首页</span>
                            </li>
                        </router-link> -->
                        <router-link :to="routers.question" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <el-icon>
                                    <Grid />
                                </el-icon>
                                <span class="nav-item-title">&nbsp;题库</span>
                            </li>
                        </router-link>
                        <router-link :to="routers.questionbank" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <el-icon>
                                    <List />
                                </el-icon>
                                <span class="nav-item-title">&nbsp;专题</span>
                            </li>
                        </router-link>
                        <!-- <router-link :to="routers.task" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <el-icon>
                                    <Checked />
                                </el-icon>
                                <span class="nav-item-title">&nbsp;任务</span>
                            </li>
                        </router-link> -->
                        <router-link :to="routers.activity" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <el-icon>
                                    <Flag />
                                </el-icon>
                                <span class="nav-item-title">&nbsp;模拟</span>
                            </li>
                        </router-link>
                        <router-link v-if="isAdmin || routerNames.find(e => e === '评测')" :to="routers.assessment" custom
                            v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <el-icon>
                                    <TrendCharts />
                                </el-icon>
                                <span class="nav-item-title">&nbsp;评测</span>
                            </li>
                        </router-link>
                        <router-link v-if="!update" :to="routers.cloudClass" custom v-slot="{ navigate, isActive }">
                            <li class="nav-item" :class="isActive ? 'active' : ''" @click="navigate">
                                <el-icon>
                                    <Platform />
                                </el-icon>
                                <span class="nav-item-title">&nbsp;云课堂</span>
                            </li>
                        </router-link>
                        <!-- 管理 -->
                        <li class="nav-item" v-if="getuser?.isAdmin" @click="goToMgmt">
                            <el-icon>
                                <Management />
                            </el-icon>
                            <span class="nav-item-title">&nbsp;管理</span>
                        </li>

                        <router-link :to="{ name: '科学中心' }" custom v-slot="{ navigate }" v-if="update">
                            <li class="nav-item" @click="navigate">
                                &nbsp;大数据
                            </li>
                        </router-link>
                    </ul>

                    <div class="d-flex">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">
                                <el-dropdown @command="handleCommand">
                                    <div class="avater-h nav-item-title">
                                        <el-avatar style="transform: translateY(7px)" size="small"
                                            :src="circleUrl"></el-avatar>
                                        <span class="avater-name hov" v-text="myName"></span>
                                    </div>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item command="u">个人中心</el-dropdown-item>
                                            <!-- <el-dropdown-item command="a">管理我的题目</el-dropdown-item> -->
                                            <!-- <el-dropdown-item command="c">测试点贡献查询</el-dropdown-item> -->
                                            <!-- <el-dropdown-menu class="tmp111" command="d" divided v-if="!update">修改个人信息</el-dropdown-menu> -->
                                            <!-- <el-dropdown-item command="b">退出</el-dropdown-item> -->
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog v-model="dialogVisible" class="" width="550px">
            <template #header>
                <span class="icon-text el-dialog__header-title">
                    <el-icon class="text-primary">
                        <Guide />
                    </el-icon>
                    {{ name }}
                </span>
            </template>
            <div class="row justify-content-md-center text-login">
                <div class="col">
                    <!-- <h4 v-text="name" :class="name == '登录' ? 'text-center' : ''"></h4> -->
                </div>
            </div>

            <div id="navel-dialog" class="row justify-content-md-center text-body">

                <div class="col" v-show="name == '登录'">
                    <el-form ref="formref" :model="form" label-width="95px" size="default" label-position="left">
                        <el-form-item class="text-item text-center" label-width="0">
                            <img style="transform: translateX(10px)" width="80" class="headimage"
                                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
                        </el-form-item>
                        <el-form-item label="团队ID">
                            <el-input placeholder="团队ID" name="teamid" v-model="form.teamid"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="账号/手机号">
                            <el-input placeholder="账号/手机号" name="phonenum" v-model="form.phonenum"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input placeholder="密码" name="password" type="password"
                                v-model="form.password"></el-input>
                        </el-form-item>
                        <div class="text-right pu" @click="name = '忘记密码'">找回/修改密码</div>
                        <el-form-item label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col">
                                    <button class="btn d-block btn-login" type="button" @click="login">登录</button>
                                </div>
                                <div class="col">
                                    <button class="btn d-block btn-login" type="button"
                                        @click="name = '注册'">用户注册</button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="col" v-show="name == '忘记密码'">
                    <el-form ref="forgetref" :model="forget" label-width="95px" size="default" label-position="left">
                        <el-form-item class="text-item text-center" label-width="0">
                            <img style="transform: translateX(10px)" width="80" class="headimage"
                                src="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg" />
                        </el-form-item>
                        <el-form-item class="text-item" label="手机号：" prop="phonenum">
                            <el-input placeholder="请输入手机号" name="phonenum" v-model="forget.phonenum"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="验证码：" prop="yzm">
                            <div class="row m-0">
                                <div class="col p-0">
                                    <el-input placeholder="四位验证码" v-model="forget.yzm"></el-input>
                                </div>
                                <div class="col pr-0">
                                    <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                                        @click.stop.prevent="click2" :disabled="time2 !== 60"
                                        v-text="time2 == 60 ? '验证码' : time2"></button>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item class="text-item" label="新密码：" prop="password">
                            <el-input placeholder="请输入新密码" name="newpassword" type="password"
                                v-model="forget.password"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col p-0 text-right">
                                    <button class="btn btn-login d-block" type="button"
                                        @click="forgetpassword">修改密码</button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
                <el-dialog width="" class="el-dialog-z-1" v-model="innerVisible">
                    <template #header>
                        <span class="icon-text el-dialog__header-title">
                            <el-icon class="text-primary">
                                <Guide />
                            </el-icon>
                            选择头像
                        </span>
                    </template>
                    <div>
                        <img :src="im" class="headimage" @click="register.headportrait = im;
                    passwordform.headportrait = im;
                    innerVisible = false;
                    " v-for="im in  headimage " :key="im" />
                    </div>
                </el-dialog>

                <div class="col" v-show="name == '注册'">
                    <el-form ref="registerref" :rules="registerrole" :model="register" label-width="95px" size="default"
                        label-position="left">
                        <el-form-item class="text-item cu" @click=" innerVisible = true" label-width="0">
                            <img :src="register.headportrait" class="headimage" width="80" />
                            &nbsp;&nbsp;&nbsp;点击图片修改头像
                        </el-form-item>
                        <el-form-item class="text-item" label="手机号：" prop="phonenum">
                            <el-input placeholder="请输入手机号" name="phonenum" v-model="register.phonenum"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="验证码：" prop="yzm">
                            <div class="row m-0">
                                <div class="col p-0">
                                    <el-input placeholder="请输入验证码" v-model="register.yzm"></el-input>
                                </div>
                                <div class="col pr-0">
                                    <button style="height: 30px; border: 0px" class="d-block btn-login border-light"
                                        @click.stop.prevent="click" :disabled="time !== 60"
                                        v-text="time == 60 ? '验证码' : time"></button>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item class="text-item" label="密码：" prop="password">
                            <el-input type="password" name="password" placeholder="请输入密码"
                                v-model="register.password"></el-input>
                        </el-form-item>

                        <el-form-item class="text-item">
                            <el-input placeholder="请输入用户名" aria-label="用户名：" name="name"
                                v-model="register.name"></el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col p-0">
                                    <button class="btn btn-login d-block" type="button"
                                        @click="registersubmit">注册</button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

                <div class="col" :style="{ marginTop: '0px' }" v-show="name == '修改个人信息'">
                    <el-form class="fix-form" ref="registerref" :model="passwordform" label-width="80px" size="default"
                        label-position="left">
                        <div class="form-item-title">
                            个人信息
                        </div>
                        <el-form-item class="text-item cu" @click=" innerVisible = true" label-width="0">
                            <div class="icon-text">
                                <el-avatar :src="passwordform.headportrait ? passwordform.headportrait : getuser ? getuser.headportrait : 'https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/JOY/headportrait/head9.jpg'
                        " class="headimage" :style="{ width: '56px', height: '56px', marginRight: '24px' }"
                                    width="56"></el-avatar>
                                <span>点击修改个人头像</span>
                            </div>
                        </el-form-item>
                        <el-form-item class="text-item" label="用户名：" prop="name">
                            <el-input size="default" type="text" placeholder="请输入用户名"
                                v-model.trim="passwordform.name"></el-input>
                        </el-form-item>
                        <!-- <div class="form-item-title">
                            修改密码
                        </div>
                        <el-form-item class="text-item" label="原密码：" prop="password">
                            <el-input size="default" type="password" name="password" placeholder="请输入原始密码"
                                v-model="passwordform.password">
                            </el-input>
                        </el-form-item>
                        <el-form-item class="text-item" label="新密码：" prop="password1">
                            <el-input size="default" type="password" name="password" placeholder="请输入新密码"
                                v-model="passwordform.password1">
                            </el-input>
                        </el-form-item> -->
                        <el-form-item class="text-item" label-width="0">
                            <div class="row m-0 p-0">
                                <div class="col p-0">
                                    <el-button class="fix-info-button" type="primary" size="default"
                                        @click="changepassword">
                                        确定
                                    </el-button>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-dialog>
    </el-header>
</template>

<script setup lang='ts'>
import { CloseBold, Menu } from '@element-plus/icons-vue';
import { ElForm, ElMessage, ElMessageBox } from "element-plus";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import {
asyncaddteamlog,
asyncchangepassword,
asynccreateteam,
asyncgetregistphoneVerificationCode,
asynclogin,
asynclogout,
asyncresetpassword,
asyncuserregist,
selectteamrole,
} from "../../api";
import { Storekey } from "../../interface";
import Studycodemodel from "../../mysql_interface/studycodemodel";
import headimage from "../../ojSass/data/headimage";
import * as routers from "../../ojSass/data/router";
import { adminTeamId } from '../../util/data';
import { isPhonenum } from "../../util/RegExp";
const router = useRouter()
const teamloading = ref(false)
const dialogVisible = ref(false)
const dialogVisibleteam = ref(false)
const collapse = reactive<Record<string, any>>({})
const teamselect = ref<Studycodemodel.Iteam[]>([])
const time = ref(60)
const time2 = ref(60)
defineProps<{ icon: string, update?: boolean, href?: string }>()

const dropdownref = ref()

const passwordform = reactive({
    name: '',
    password: "",
    password1: "",
    password2: "",
    headportrait: "",
    phonenum: ""
})
const form = reactive({
    teamid: "",
    password: "",
    phonenum: "",
})
const register = reactive({
    phonenum: "",
    password: "",
    yzm: "",
    headportrait: headimage[9],
    name: "",
})
const forget = reactive({
    phonenum: "",
    password: "",
    yzm: "",
})
const teamForm = reactive<Record<string, any>>({
    userid: 0,
    username: "",
    type: "申请",
    context: "",
})
const name = ref('登录')

const registerrole = {
    phonenum: [
        {
            message: "手机号不合法",
            regexp: isPhonenum,
            trigger: "blur",
        },
    ],
    password: [
        {
            min: 4,
            max: 25,
            message: "长度在 3 到 25 个字符",
            trigger: "blur",
        },
    ],
    yzm: [{ required: true, message: "请输入验证码", trigger: "blur" }],
}
const teamrules = {
    teamid: [{ required: true, message: "请选择团队", trigger: "blur" }],
}
const innerVisible = ref(false)

const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user || {}
})
const getteam = computed(() => {
    return store.state.team?.rows || []
})
const isAdmin = computed(() => {
    return getuser.value?.isAdmin
})
const myName = computed(() => {
    if ((getuser?.value?.name?.length || 0) > 5) {
        return getuser?.value?.name?.substring(0, 5) + '...'
    }
    return getuser?.value?.name
})

// 登录管理后台
function goToMgmt() {
    const { origin, pathname } = window.location;
    // window.location.href = `${origin}/saasMgmt`
    // window.open(`${origin}/saasMgmt.html`)
    window.open(`${origin}/saasMgmt`)
}
function goToYkt() {
    // 跳转云课堂
    const { origin, pathname } = window.location;
    const url = `${origin}/stemhome?id=${getuser?.value.ID}&teamid=${getuser?.value.teamid}`
    window.open(url)
}
// isHGKJteam
const isHGKJteam = computed(() => {
    return getuser?.value.teamid === adminTeamId
})

// 获取权限
const roleName = "学生"
const routerNames = ref<any[]>([])
async function getPermissionsCfg() {
    const { count, rows } = await selectteamrole({
        teamid: getuser.value.teamid, name: roleName
    })
    // 可能存在多条
    routerNames.value = rows[0]?.routername || []
}
onMounted(() => {
    // getPermissionsCfg();
    // handleCommand('d')
});

const circleUrl = computed(() => {
    if (getuser.value) return getuser.value.headportrait;
    return "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
})

async function handleCommand(co: string) {
    switch (co) {
        case "a":
            router.push({ name: "题库", query: { tabName: 'user', } });
            break;
        case "b":
            await asynclogout();
            router.push({
                name: "登录",
            });
            await store.dispatch('actiononline')
            break;
        case "c":
            router.push({
                name: "贡献测试点查询",
            });
            break;
        case "u":
            router.push({
                name: "用户",
            });
            break;
        case "d":
            dialogVisible.value = true;
            name.value = "修改个人信息";
            break;
        default:
    }
}

function shoudialogVisible(name1: string) {
    dialogVisible.value = true;
    if (name1) {
        name.value = name1;
    }
}

async function login() {
    const { phonenum, password, teamid } = form;
    try {
        await asynclogin({ ID: phonenum, password, teamid });
        location.reload()
        await store.dispatch('actiononline')
        dialogVisible.value = false;
        ElMessage.success("登录成功");
    } catch (e: any) {
        ElMessage.error(String(e));
    }
}

async function click() {
    const { phonenum } = register;
    if (time.value !== 60) return;
    if (isPhonenum.test(phonenum)) {
        await asyncgetregistphoneVerificationCode(phonenum);
        const x = setInterval(() => {
            time.value = time.value - 1
            if (time.value == 0) {
                clearInterval(x);
                time.value = 60;
            }
        }, 1000);
    }
}

async function click2() {
    const { phonenum } = forget;
    if (time2.value !== 60) return;
    if (isPhonenum.test(phonenum)) {
        await asyncgetregistphoneVerificationCode(phonenum);
        const x = setInterval(() => {
            time2.value = time2.value - 1;
            if (time2.value == 0) {
                clearInterval(x);
                time2.value = 60;
            }
        }, 1000);
    }
}

async function changepassword() {
    try {
        await asyncchangepassword(passwordform);
        ElMessage.success("修改个人信息成功");
        dialogVisible.value = false;
    } catch (e: any) {
        ElMessage.error(e);
    }
}

const forgetref = ref<typeof ElForm>()

async function forgetpassword() {
    forgetref.value?.validate(async (valid: any) => {
        if (valid) {
            try {
                await asyncresetpassword(forget);
                ElMessage.success("修改个人信息成功");
                await asynclogin({
                    ID: forget.phonenum,
                    password: forget.password,
                });
                await store.dispatch('actiononline')
                dialogVisible.value = false;
            } catch (e: any) {
                ElMessage.error(e);
            }
        } else {
            return false;
        }
    });
}

function handleCommand2(co: string) {
    dropdownref.value?.handleClose()
    switch (co) {
        case "a":
            if (!getuser.value) {
                shoudialogVisible('登录');
            } else {
                if (
                    getteam.value.filter((v) => v.userid === getuser.value?.ID).length >
                    4
                ) {
                    ElMessage.warning("创建团队数上限为5");
                    return;
                }

                ElMessageBox.prompt("请输入名称", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }).then(({ value }) => {
                    if (value) {
                        asynccreateteam({ name: value })
                            .then((e) => {
                                if (e.ID) {
                                    router.push({
                                        name: "团队",
                                        params: {
                                            ID: e.ID,
                                        },
                                    });
                                }
                            })
                            .catch((e) => {
                                ElMessage.error(e);
                            });
                    }
                });
            }
            break;
        case "b":
            dialogVisibleteam.value = true;
            break;
        default:
            return
    }
}
const ruleFormteam = ref<typeof ElForm>()

async function submitForm(name: string) {
    const t = ruleFormteam.value

    t?.validate(async (v: any) => {
        if (v) {
            await asyncaddteamlog(teamForm)
                .then(() => {
                    ElMessage.success("提交成功");
                    dialogVisibleteam.value = false;
                })
                .catch((e) => {
                    ElMessage.warning(e);
                });
        }
    });
}

const registerref = ref()

async function registersubmit() {
    registerref.value.validate(async (valid: any) => {
        if (valid) {
            try {
                await asyncuserregist(register);
                ElMessage.success("注册成功");
                await store.dispatch('actiononline')
                dialogVisible.value = false;
                location.reload()
            } catch (e: any) {
                ElMessage.error(e);
            }
        } else {
            return false;
        }
    });
}

watch(() => store.state.user, (e) => {
    if (e) {
        passwordform.name = e.name ? e.name : ''
        getPermissionsCfg();
    }
})

defineExpose({
    shoudialogVisible,
    handleCommand,
    handleCommand2
})

</script>

<style scoped>
/* ojSass */
#nav {
    background-color: #fff;
    left: 0px;
    top: 0px;
    margin: 0 auto;
    width: 100%;
    z-index: 10;
    box-shadow: 0px 3px 6px rgba(114, 114, 114, 0.16);
}

/*ojSass 头像 */
.hov:hover {
    color: #3b5fdd;
}

/* ojSass */
#nav .active {
    color: #3b5fdd;
    border-bottom: 4px solid #3b5fdd
}


/* ojSass */
.nav-item {
    border-bottom: 4px solid transparent;
    display: inline-flex;
    align-items: center;
    /* flex-wrap: wrap; */
    /* align-content: flex-end; */
    box-sizing: border-box;
    font-family: PingFangSC-Semibold;
    /* width: 80px; */
    text-align: center;
    font-size: 16px;
    /* font-weight: bolder; */
    padding: 0 18px;
    cursor: pointer;

    line-height: 64px;
    height: 64px;
    color: rgba(51, 51, 51, 1);
    text-decoration: none;
    position: relative;
}

.nav-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#nav .navbar {
    padding: 0;
    height: 64px;
    line-height: 64px;
}

#nav .navbar-brand {
    min-width: 180px;
    height: 64px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    margin: 0;
}

#nav .navbar-brand img {
    margin: 0 auto;
    display: block;
}

#nav .img {
    height: 1.1rem;
    width: 1.1rem;
    vertical-align: baseline;
}

#nav .icon {
    font-size: 1.25rem;
}

/*ojSass nav-tabs */
.nav-item:hover {
    color: #3b5fdd;
}

/*ojSass 云课堂 */
.nav-item:hover a {
    color: #3b5fdd !important;
}

.router-link-exact-active {
    color: var(--color-cheng);
}

.el-icon-bell {
    font-size: 24px;
}

.headimages {
    height: 80px;
    line-height: 80px;
}

.headimages-item {
    display: inline-block;
    width: 50px;
    height: 50px;
}

.imageright {
    margin-right: -35px;
}

.imageleft {
    margin-left: -35px;
}

.imagecenter {
    z-index: 20;
}

.avater-name {
    display: inline-block;
    color: rgba(51, 51, 51, 1);
    margin-left: 10px
}

.headimages img {
    width: 50px;
    height: 50px;
}

.avater-h {
    line-height: 64px;
}

.avater-h:focus-visible {
    outline: none !important;
}

.head-left {
    margin-right: -25px;
}

.head-center {
    z-index: 10;
}

.head-right {
    margin-left: -25px;
}

.headimages img:hover {
    width: 75px;
    height: 75px;
    z-index: 10;
}

.pu {
    cursor: pointer;
    color: var(--color-909399);

    line-height: 15px;
    margin-bottom: 20px;
}

.image {
    width: 75px;
    height: 75px;
}

.text-login {
    margin-bottom: 3px;
    margin-top: 3px;
}

.text-login h4 {
    text-align: center;
    font-size: 28px;
    font-weight: 650;
    color: var(--color-606266);
}

.text-body .col-6 {
    min-height: 400px;
}

.fix-form {
    padding: 0 50px;
}

.form-item-title {
    text-align: left;
    font-weight: bolder;
    margin: 30px 0;
    font-size: 16px;
}

.icon-text {
    display: inline-flex;
    align-items: center;
}

.fix-info-button {
    width: 40%;
    margin-left: 30%;
    margin-top: 30px;
    height: 40px;
    font-size: 16px;
    border-radius: 4px !important;
    color: #fff;
}

.fix-info-button:hover {
    color: #fff;
    border-color: transparent !important;
}

.btn {
    height: 40px;
    font-size: 18px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}

.btn-login {
    background: var(--color-43);
    border-radius: 2px !important;
    color: #fff;
}

.btn-login:hover {
    color: #fff;
    border-color: transparent !important;
}

.text-item {
    margin-bottom: 28px;
}

.p-1 {
    font-size: 14px;
}

.nav-item-name {
    line-height: 64px;
}

.headimage {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0);
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    cursor: pointer;
}

.d-block {
    width: 100%;
}

/*  */
#nav .navbar-collapse {
    background-color: #fff;
    width: auto;
}
</style>


<style>
.el-dialog-z {
    background-repeat: no-repeat !important;
    background-position: left !important;
    border: 0px;
    background-size: 464px 100% !important;
    background-color: rgba(255, 255, 255, 1) !important;
    min-height: 530px;
}

.el-dialog-z .icon {
    font-size: 1rem;
}

.el-dialog-z .el-dialog__header {
    padding: 0;
}

#navel-dialog .el-form-item__content {
    display: block;
}

.el-dialog-z-1 {
    height: auto;
}

.el-dialog-z-1 img {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
}

#nav .el-badge {
    vertical-align: initial;
}

#nav .el-dropdown {
    color: #212529;
}

.tmp111:before {
    display: none !important;
}
</style>